<template>
  <div>
    <el-menu
      :default-active="$route.path"
      router
      class="el-menu-vertical-demo"
      style="width: 199px; min-height: 100%;position: fixed"
    >
      <div class="block">
        <el-avatar icon="el-icon-user-solid"></el-avatar>
      </div>
      <div>
        <div style="text-align: center" v-if="uid != null">
          <span class="nickname">{{ nickName }}</span>
          <el-link :underline="false" style="margin-top: 10px;color: red" @click="logout">退出登录</el-link>
        </div>
        <el-button size="small" round v-else @click="dialogFormVisible = true">登 录</el-button>
      </div>
      <el-menu-item index="/" style="margin-top: 50px">
        <i class="el-icon-s-home"></i>
        <span slot="title">首 页</span>
      </el-menu-item>

      <el-menu-item index="/user/info">
        <i class="el-icon-user-solid"></i>
        <span slot="title">个人资料</span>
      </el-menu-item>
      <el-menu-item index="/record/ser">
        <i class="el-icon-search"></i>
        <span slot="title">搜索记录</span>
      </el-menu-item>

      <el-menu-item index="/record/browse">
        <i class="el-icon-document"></i>
        <span slot="title">浏览记录</span>
      </el-menu-item>
    </el-menu>
    <el-dialog title="快拼电商搜索系统" width="30%" :visible.sync="dialogFormVisible">
        <login></login>
    </el-dialog>
  </div>
</template>

<script>
import login from '@/components/user/login'
import {userLogout} from "@/api/login";

export default {
  components:{login},
  name: "asideVue",
  data() {
    return {
      uid: localStorage.getItem('uid'),
      nickName: localStorage.getItem('nick_name'),
      dialogFormVisible:false
    };
  },
  methods: {
    logout() {
      userLogout({uid: this.uid}).then(res => {
        if (res.data.code === '8888') {
          setTimeout(() => {
            this.$message({
              message: '退出登录成功',
              type: 'success'
            });
          }, 2000);
          localStorage.removeItem('uid');
          localStorage.removeItem('token');
          localStorage.removeItem('nick_name');
          window.location.reload()
        }else {
          this.$message.error("出错了，请联系官方。")
        }
      })
    },
  },
  mounted() {
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.block {
  margin-top: 150px;
  line-height: 50px;
  padding: 10px 10px;
}

.nickname {
  font-size: 15px;
}
</style>
